<template>
  <div style="height:100%;width: 100%">
    <!--<div v-if="loading" class="loading">
      {{ Loading }}%
      <el-progress style="width:40vw;" :stroke-width="26" :percentage="percentage"></el-progress>
    </div>-->
    <div class="home">
      <top class="wow fadeInDown" name="北京东邦御厨科技有限公司" @reast="reast" @selectItem="selectItem"></top>
      <div class="homemain" v-if="selectedItem===1">
        <div class="homemainr">
          <div class="item1">
            <item name="数据统计">
              <item1 ref="item1" :objParent="objParent"></item1>
            </item>
          </div>
          <div class="item2">
            <item name="新增报价" :delay="0.5">
              <item3  ref="item3" :objParent="objParent"></item3>
            </item>
          </div>
        </div>
        <div class="homemainC">
          <div class="item1">
            <item6 ref="item6"></item6>
            <!--<item2 ref="item2"></item2>-->
          </div>
          <div class="item2">
            <item name="目标完成比" :delay="0.5">
              <item7 ref="item7" :objParent="objParent"></item7>
            </item>
          </div>
        </div>
        <div class="homemainr">
          <div class="item1">
            <item name="数据统计">
              <item4 ref="item4" :objParent="objParent"></item4>
            </item>
          </div>
          <div class="item2">
            <item name="新增回款" :delay="0.5">
              <item5  ref="item5" :objParent="objParent"></item5>
            </item>
          </div>
        </div>
      </div>
      <!--切换页签-->
      <!--<div class="homemain" v-else>
        <div class="homemainr">
          <div class="item1">
            <item name="工程速报">
              &lt;!&ndash;<item1 ref="item1" :objParent="objParent"></item1>&ndash;&gt;
            </item>
          </div>
          &lt;!&ndash;<div class="item2">
            <item name="新增报价" :delay="0.5">
              &lt;!&ndash;<item3  ref="item3" :objParent="objParent"></item3>&ndash;&gt;
            </item>
          </div>&ndash;&gt;
        </div>
        <div class="homemainC">
          <div class="item2">
            <item name="售后速报" :delay="0.5">
            &lt;!&ndash;<item6 ref="item6"></item6>&ndash;&gt;
            </item>
          </div>
          <div class="item2">
            <item name="售后速报" :delay="0.5">
              &lt;!&ndash;<item7 ref="item7" :objParent="objParent"></item7>&ndash;&gt;
            </item>
          </div>
        </div>
        <div class="homemainr">
          <div class="item1">
            <item name="采购速报">
              &lt;!&ndash;<item4 ref="item4" :objParent="objParent"></item4>&ndash;&gt;
            </item>
          </div>
          &lt;!&ndash;<div class="item2">
            <item name="新增回款" :delay="0.5">
              <item5  ref="item5" :objParent="objParent"></item5>
            </item>
          </div>&ndash;&gt;
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
import {login, queryList} from '@/api/home.js'
import top from '@/components/top'
import item from '@/components/item'
import item1 from './components/item1'
import item2 from './components/item2'
import item3 from './components/item3'
import item4 from './components/item4'
import item5 from './components/item5'
import item6 from './components/item6'
import item7 from './components/item7'
import WOW from '../../node_modules/wow.js/dist/wow'

export default {
  components: { top, item, item1, item2, item3, item4, item5, item6, item7 },
  data () {
    return {
      objParent: [],
      timerId: null,
      loading:true,
      Loading:0,
      percentage:0,
      selectedItem:1
    }
  },
  methods: {
   /* async getData () {
      var res = await getItemAPI()
      var res2 = this.$x2js.xml2js(res)
      this.objParent = JSON.parse(res2.Envelope.Body.getLargeScreenSelectResponse.getLargeScreenSelectReturn.__text)

      this.$nextTick(()=>{
        this.$refs.item1.getDataList()
        this.$refs.item2.getDataList()
        this.$refs.item3.getDataList()
        this.$refs.item4.getDataList()
        this.$refs.item5.getDataList()
        this.$refs.item7.getTableDataList()
      })
    },*/
    reast(){
      // this.getData()
    },
    // 展示销售或采购
    selectItem(i){
      console.log(i)
      this.selectedItem = i
    }
    /*ceshi2(){
      login({username: 'admin@qq.com',password:'12345678'}).then(res=>{
        console.log(res)
        localStorage.setItem('token',res.data.token)
      })
    }*/
  },
  mounted () {
    setTimeout(()=>{
      this.loading = false
    },5000)
    const interval = setInterval(()=>{
      this.Loading += 2
      this.percentage += 2
      if(this.Loading >= 100){
        clearInterval(interval)
      }
    },100)
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true,
      callback: function (box) {
      },
      scrollContainer: null,
      resetAnimation: true
    })
    wow.init()
  },
  created() {
    // this.getData()
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-progress__text{
  color: transparent !important;
}
.loading{
  position: fixed;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  z-index: 111;
  background: linear-gradient(45deg, #033483,#0ca7f0);
  backdrop-filter: blur(5px);
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size:60px;
  color: #fff;
}
.home {
  width: 100%;
  position: fixed;
  height: 100%;
  background: url("../assets/bg.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
}

.homemain {
  position: relative;
  width: calc(100% - 40px);
  height: calc(100% - 116px - 20px);
  display: flex;
  z-index: 100;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  margin-left: 20px;
  margin-right: 20px;

  .homemainl {
    width: calc(27% - 0px);
    margin-left: 0px;
    position: relative;
    height: 100%;
    pointer-events: initial;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .item1 {
      position: relative;
      width: 100%;
      height: calc(25% - 20px);
    }

    .item2 {
      position: relative;
      width: 100%;
      height: calc(35% - 20px);
    }

    .item3 {
      position: relative;
      width: 100%;
      height: calc(40% - 0px);
    }
  }

  .homemainC {
    position: relative;
    width: calc(46% - 40px);
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .item1 {
      position: relative;
      width: 100%;
      height: calc(31% - 10px);
    }

    .item2 {
      position: relative;
      width: 100%;
      height: calc(69% - 0px);
    }
  }

  .homemainr {
    width: calc(27% - 0px);
    margin-right: 0px;
    position: relative;
    height: 100%;
    pointer-events: initial;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    z-index: 11;

    .item1 {
      position: relative;
      width: 100%;
      height: calc(60% - 20px);
    }

    .item2 {
      position: relative;
      width: 100%;
      height: calc(40% - 0px);
    }
  }
}
</style>
